<template>
  <div class="home-container">
    <!-- 数据卡片区域 -->
    <el-row :gutter="20">
      <el-col :span="4" v-for="(item, index) in cardData" :key="index">
        <div class="grid-content">
          <el-row>
            <el-col :span="8" class="col-left" :style="{ backgroundColor: item.color }">
              <component :is="item.icon" style="width: 2em; height: 2em; color: white;" />
            </el-col>
            <el-col :span="16" class="col-right">
              <div class="card-number">{{ item.value }}</div>
              <div class="card-title">{{ item.title }}</div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="8">
        <div class="chart-container" ref="pieChart"></div>
      </el-col>
      <el-col :span="8">
        <div class="chart-container" ref="barChart"></div>
      </el-col>
      <el-col :span="8">
        <div class="chart-container" ref="radarChart"></div>
      </el-col>
    </el-row>

    <!-- 面积图 -->
    <div class="chart-container-large" ref="areaChart" style="margin-top: 20px;"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import {
  Avatar,
  Promotion,
  Grid,
  Histogram,
  Share,
  Tools
} from '@element-plus/icons-vue'

// 数据卡片数据
const cardData = [
  { title: '当日新增体检用户', value: 103, icon: 'Avatar', color: '#478CE9' },
  { title: '当日新增预约用户', value: 203, icon: 'Promotion', color: '#55BA75' },
  { title: '新增体检项目', value: 303, icon: 'Grid', color: '#F39D38' },
  { title: '新增体检报告', value: 403, icon: 'Histogram', color: '#DD4E2A' },
  { title: '新增体检套餐', value: 503, icon: 'Share', color: '#926BDD' },
  { title: '新增体检设备', value: 603, icon: 'Tools', color: '#DD4E2A' }
]

// 图表引用
const pieChart = ref(null)
const barChart = ref(null)
const radarChart = ref(null)
const areaChart = ref(null)

// 初始化图表
onMounted(() => {
  // 初始化饼图
  const pie = echarts.init(pieChart.value)
  pie.setOption({
    title: {
      text: '体检项目分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: '常规体检' },
          { value: 735, name: '专项体检' },
          { value: 580, name: '入职体检' },
          { value: 484, name: '健康体检' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  })

  // 初始化柱状图
  const bar = echarts.init(barChart.value)
  bar.setOption({
    title: {
      text: '月度体检统计',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  })

  // 初始化雷达图
  const radar = echarts.init(radarChart.value)
  radar.setOption({
    title: {
      text: '体检项目完成度',
      left: 'center'
    },
    radar: {
      indicator: [
        { name: '常规体检', max: 100 },
        { name: '专项体检', max: 100 },
        { name: '入职体检', max: 100 },
        { name: '健康体检', max: 100 },
        { name: '体检报告', max: 100 }
      ]
    },
    series: [
      {
        type: 'radar',
        data: [
          {
            value: [85, 90, 70, 95, 88],
            name: '完成情况'
          }
        ]
      }
    ]
  })

  // 初始化面积图
  const area = echarts.init(areaChart.value)
  area.setOption({
    title: {
      text: '年度体检趋势',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '体检人数',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
      }
    ]
  })

  // 监听窗口大小变化，调整图表大小
  window.addEventListener('resize', () => {
    pie.resize()
    bar.resize()
    radar.resize()
    area.resize()
  })
})
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.grid-content {
  margin-bottom: 20px;
}

.col-left {
  border-radius: 4px 0 0 4px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  vertical-align: middle;
}

.col-right {
  border-radius: 0 4px 4px 0;
  height: 100px;
  text-align: center;
  line-height: 50px;
  vertical-align: middle;
  box-shadow: 0 1px 1px #c8c9cc;
  background-color: white;
}

.card-number {
  font-size: 30px;
  font-weight: bold;
  color: #606266;
}

.card-title {
  font-size: 14px;
  color: #909399;
}

.chart-container {
  height: 300px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 1px #c8c9cc;
  padding: 20px;
}

.chart-container-large {
  height: 400px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 1px #c8c9cc;
  padding: 20px;
}
</style> 